<template>
  <div class="counter-container">
    <!-- 数量-1 -->
    <button type="button" class="btn btn-light btn-sm" @click="subClick">-</button>
    <!-- 输入框 -->
    <input type="number" v-model="number" class="form-control form-control-sm ipt-num" />
    <!-- 数量+ -->
     <button type="button" class="btn btn-light btn-sm" @click="addClick">+</button>
  </div>
</template>

<script>
export default {
    name:'EsCounter',
    emits:['numChange'],
    props:{
        num:{
            type:Number,
            required:true
        },
        // 购买的商品最小值为0
        min:{
            type:Number,
            // 表示不限制最小值
            default:NaN
        }
    },
    data(){
        return{
            number:this.num
        }
    },
    methods:{
        subClick(){
            // isNaN（）用于判断数值是否是NAN
            if(!isNaN(this.min)&&this.number-1<this.min) return
            this.number--
        },
        addClick(){
            this.number++
        }
    },
 watch:{
        number(newval){
            // 将新值住转化成整数
            const parseResult=parseInt(newval)
            // 若转化后的数值为负数或则不是数字把他强行转换
            if(isNaN(parseResult)||parseResult<1){
                this.number=1
                return
            }
            // 如果新值有小数
            if(String(newval).indexOf('.')!==-1){
                this.number=parseResult
                return
            }
            // 如果有数据变化，就将数据放回的组件使用者
            this.$emit('numChange',this.number)
          
        }
    }


}
</script>

<style lang="less" scoped>
.counter-container{
    display: flex;
    .btn{
        width: 25px;
    }
    .ipt-num{
        width: 34px;
    text-align: center;
    margin: 0 4px;
    }
}
</style>